<template>
  <div class="Cardealer">
    <Head msg="经销商认证"></Head>
    <div class="dealer-notice">
      <div style="font-size: 16px;font-weight: bold">经销商企业认证介绍：</div>
      <div>
        1、经销商企业认证提供更安全、更严格的真实性认证，也能够更好地保护经销商企业及用户的合法权益；
      </div>
      <div>2、支持中国大陆的所有汽车经销商企业及组织进行认证；</div>
      <div>
        3、经销商企业认证成功后，可发布文章，发布车源，订单管理等权限，更好地拓展企业的业务。
      </div>
    </div>
    <div class="login-list">
      <div>真实姓名：</div>
      <input type="text" placeholder="请输入真实姓名" v-model="name" />
    </div>
    <div style="color: red;font-size: 12px;margin-top: 5px">
      *注：真实姓名需与身份证上一致
    </div>
    <div class="login-list">
      <div>联系电话：</div>
      <input type="number" placeholder="请输入联系电话" v-model="tel" />
    </div>
    <div class="login-list">
      <div>身份证上传：</div>
    </div>
    <cube-upload ref="upload" v-model="files1" :action="action">
      <div class="clear-fix">
        <cube-upload-file
          v-for="(file, i) in files1"
          :file="file"
          :key="i"
        ></cube-upload-file>
        <cube-upload-btn :multiple="false">
          <div>
            <i>＋</i>
            <p>请上传申请人身份证正面照</p>
          </div>
        </cube-upload-btn>
      </div>
    </cube-upload>
    <cube-upload ref="upload" v-model="files2" :action="action">
      <div class="clear-fix">
        <cube-upload-file
          v-for="(file, i) in files2"
          :file="file"
          :key="i"
        ></cube-upload-file>
        <cube-upload-btn :multiple="false">
          <div>
            <i>＋</i>
            <p>请上传申请人身份证反面照</p>
          </div>
        </cube-upload-btn>
      </div>
    </cube-upload>
    <div class="login-list">
      <div>公司名称：</div>
      <input type="text" placeholder="请输入公司名称" v-model="company" />
    </div>
    <div class="login-list">
      <div>企业组织代码：</div>
      <input type="text" placeholder="请输入组织代码" v-model="companySn" />
    </div>
    <div class="login-list">
      <div>营业执照上传：</div>
    </div>
    <cube-upload ref="upload" v-model="files3" :action="action">
      <div class="clear-fix">
        <cube-upload-file
          v-for="(file, i) in files3"
          :file="file"
          :key="i"
        ></cube-upload-file>
        <cube-upload-btn :multiple="false">
          <div>
            <i>＋</i>
            <p>请上传企业营业执照</p>
          </div>
        </cube-upload-btn>
      </div>
    </cube-upload>

    <div class="login-list">
      <div>门店图片上传：</div>
    </div>
    <cube-upload ref="upload" v-model="files4" :action="action">
      <div class="clear-fix">
        <cube-upload-file
          v-for="(file, i) in files4"
          :file="file"
          :key="i"
        ></cube-upload-file>
        <cube-upload-btn :multiple="false">
          <div>
            <i>＋</i>
            <p>请上传门店/申请人名片</p>
          </div>
        </cube-upload-btn>
      </div>
    </cube-upload>
    <div class="login-list">
      <div>门店名称：</div>
      <input type="text" placeholder="请输入门店名称" v-model="storename" />
    </div>
    <div class="login-list">
      <div>省市区：</div>
      <cube-button
        class=".cube-button"
        style="text-align:left;padding:0;width: 60vw;background:white;color: #333333"
        @click="showAddressPicker"
        >{{ cityshow }}</cube-button
      >
    </div>
    <div class="login-list">
      <div>门店地址：</div>
      <input type="text" placeholder="请输入门店地址" v-model="address" />
    </div>
    <div class="login-btn" @click="submit">提交审核</div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';

@Component({
  components: {
    Head,
  },
})
export default class Cardealer extends Sence {
  public company: string = ''; //企业名称
  public companySn: string = ''; //组织代码
  public name: string = ''; //真实姓名
  public tel: string = ''; //联系电话
  public files1: any = []; //身份证正面
  public files2: any = []; //身份证反面
  public files3: any = []; //营业执照
  public files4: any = []; //门店图片
  public storename: string = ''; //门店名称
  public address: string = ''; //门店地址
  public province: string = ''; //省
  public city: string = ''; //市
  public district: string = ''; //区
  public citylist: any = ''; //城市数据
  public cityshow: string = '请点击选择省市区';
  public action: any = {
    target: this.apiurl + 'api/v1/uploadImg',
    fileName: 'image',
    checkSuccess: this.uploadsuccess,
  };

  public uploadsuccess(res: any): any {
    console.log(res);
    return res.status == 1;
  }

  public mounted(): void {
    const that = this;
    that.post('api/v1/getRegionData').then((res: any) => {
      that.citylist = res.data;
      that.citylist.forEach((citylist: any) => {
        citylist.children = citylist.child;
        citylist.text = citylist.name;
        citylist.children.forEach((city: any) => {
          city.children = city.child;
          city.text = city.name;
          city.children.forEach((area: any) => {
            area.text = area.name;
          });
        });
      });
      console.log(this.citylist);
      (<any>this).addressPicker = (<any>this).$createCascadePicker({
        title: '城市选择',
        data: this.citylist,
        onSelect: this.selectHandle,
        onCancel: this.cancelHandle,
      });
    });
  }

  public showAddressPicker(): void {
    (<any>this).addressPicker.show();
  }

  public selectHandle(
    selectedVal: any,
    selectedIndex: any,
    selectedText: any
  ): void {
    this.cityshow = selectedText.join(' ');
    this.province = selectedVal[0];
    this.city = selectedVal[1];
    this.district = selectedVal[2];
  }

  //省市区取消按钮事件
  public cancelHandle(): void {}

  public submit(): void {
    let value1: string =
      this.files1.length > 0 ? this.files1[0].response.data.name : '';
    let value2: string =
      this.files2.length > 0 ? this.files2[0].response.data.name : '';
    let value3: string =
      this.files3.length > 0 ? this.files3[0].response.data.name : '';
    let value4: string =
      this.files4.length > 0 ? this.files4[0].response.data.name : '';
    if (this.name == '') {
      this.toast('姓名不能为空！', 'warn');
      return;
    } else if (this.tel.length != 11) {
      this.toast('手机号输入错误！', 'warn');
      return;
    } else if (value1 == '' || value2 == '') {
      this.toast('身份证照未上传完整！', 'warn');
      return;
    } else if (this.company == '') {
      this.toast('公司名称不能为空！', 'warn');
      return;
    } else if (this.companySn == '') {
      this.toast('组织代码不能为空！', 'warn');
      return;
    } else if (value3 == '') {
      this.toast('营业执照未上传！', 'warn');
      return;
    } else if (value4 == '') {
      this.toast('门店图片未上传！', 'warn');
      return;
    } else if (this.storename == '') {
      this.toast('门店名称不能为空！', 'warn');
      return;
    } else if (this.address == '') {
      this.toast('门店地址不能为空！', 'warn');
      return;
    } else if (this.province == '' || this.city == '' || this.district == '') {
      this.toast('请选择省市区！', 'warn');
      return;
    }
    this.post('api/v1/authDealer', {
      type: 1,
      idcard_front: value1,
      idcard_back: value2,
      realname: this.name,
      contact: this.tel,
      license: value3,
      shop_name: this.storename,
      address: this.address,
      province: this.province,
      city: this.city,
      district: this.district,
      shop_banner: value4,
      company: this.company,
      company_sn: this.companySn,
    }).then((res: any) => {
      this.toast('提交成功');
      setTimeout(() => {
        (<any>this).$router.push('/mine');
      }, 1500);
    });
  }
}
</script>

<style scoped lang="stylus">
* {
  font-size: 14px;
}

.dealer-notice {
  text-align: left;
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #ccc;
  font-size: 14px;

  >div {
    margin-top: 5px;
    line-height: 20px;
    word-break: break-all;
  }
}

input {
  border: 1px solid #808080;
  height: 25px;
  padding: 0 5px;
}

.login-title {
  height: 80px;
  text-align: center;
  background: #4876ff;
  color: white;
  font-weight: bold;
  font-size: 16px;
  line-height: 80px;
  margin-bottom: 30px;
}

.login-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;

  > div {
    width: 33vw;
    text-align: right;
  }
}

>>> .upload-img {
  width: 80vw;
  height: 60vw;
}

>>> .login-btn {
  margin: 30px auto;
  background: red;
  color: white;
  width: 30vw;
  font-weight: bold;
  padding: 8px 0;
  font-size: 15px;
}

>>> .cube-upload {
  border: 1px solid #808080;
  border-radius: 8px;
  overflow: hidden;
  width: 80vw;
  margin: auto;
  margin-top: 20px;
}

>>> .cube-upload-file, .cube-upload-btn {
  margin: 0;
  height: 200px;
}

>>> .cube-upload-file {
  margin: 0;

  + .cube-upload-btn {
    margin-top: -200px;
    opacity: 0;
  }
}

>>> .cube-upload-file-def {
  width: 100%;
  height: 100%;

  .cubeic-wrong {
    display: none;
  }
}

>>> .cube-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  > div {
    text-align: center;
  }

  i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 100px;
    font-style: normal;
    color: #fff;
    background-color: #333;
    border-radius: 50%;
  }
}
</style>
